<template>
    <div class="redrecord_container">
        <!-- 查询条件 -->
        <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" @expand="getTableH" />
        <!-- 查询结果 -->
        <ZwTable
            ref="tableRef"
            class="table-box"
            tab-h="initial"
            :option="tableOption"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()"
            @select="onSelect"
            @selection-change="onSelectionChange"
            @select-all="onSelectAll">
            <template #headerOperate>
                <el-button v-auth="EXPORT" type="primary" @click="exportTableData">导出</el-button>
            </template>
        </ZwTable>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, nextTick } from 'vue';

import { deepCopy } from '@/utils/helper';

import { getredoacketlist, getredoacketexport, getredoacketgrant } from '@/api/employe/redmanage/redmanageWord';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import { ElMessage, ElMessageBox } from 'element-plus';
const defaultParams = {
    receive_status: -1,
    cust_search: '',
    mobile: '',
    grant_user: '',
    receive_time: [],
    grant_time: []
};

const tableRef = ref<HTMLElement | null>(null);

const state = reactive({
    searchParams: deepCopy(defaultParams)
});
// 获取表格高度
const getTableH = () => {
    nextTick(() => {
        tableRef.value.getTableH();
    });
};

const searchOption = computed(() => {
    return [
        {
            label: '客户搜索',
            name: 'cust_search',
            value: '',
            type: 'input',
            placeholder: '请输入客户名称/员工备注'
        },
        {
            label: '手机号码',
            name: 'mobile',
            value: '',
            type: 'input',
            placeholder: '请输入手机号'
        },
        {
            label: '订单号',
            name: 'order_sn',
            value: '',
            type: 'input',
            placeholder: '请输入订单号/微信付款单号'
        },
        {
            label: '发放员工',
            name: 'grant_user',
            value: [],
            type: 'select',
            placeholder: '全部',
            multiple: true,
            popperClass: 'zw-hide_select_option',
            isUserSelect: true,
            formatOption: v => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '领取状态',
            name: 'receive_status',
            value: '',
            type: 'select',
            placeholder: '请选择',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve([
                            { name: '全部', id: -1 },
                            { name: '未领取', id: 1 },
                            { name: '已领取', id: 2 },
                            { name: '领取失败', id: 3 }
                        ]);
                    }, 300);
                });
            },
            formatOption: v => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '领取时间',
            name: 'receive_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
            // 设置结束日期时间为 23:59:59，设完日期不能点击 elment-plus bug？
            // defaultTime: ['00:00:00', '23:59:59']
        },
        {
            label: '发送时间',
            name: 'grant_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
            // 设置结束日期时间为 23:59:59，设完日期不能点击 elment-plus bug？
            // defaultTime: ['00:00:00', '23:59:59']
        }
    ];
});

const search = v => {
    state.searchParams = v;
};

const reset = v => {
    state.searchParams = deepCopy(defaultParams);
};

const formatter = (row: any, column: any, cellValue: any) => {
    return cellValue || '--';
};
const tableOption = [
    {
        prop: 'cust_name',
        label: '客户',
        width: 200,
        formatter
    },
    {
        prop: 'grant_amount',
        label: '发送金额',
        width: 200,
        formatter
    },
    {
        prop: 'grant_time',
        label: '发送时间',
        width: 200,
        formatter
    },
    {
        prop: 'receive_status_value',
        label: '状态',
        width: 200,
        formatter
    },
    {
        prop: 'wx_order_sn',
        label: '微信支付单号',
        width: 200,
        formatter
    },
    {
        prop: 'err_msg',
        label: '支付失败原因',
        width: 200,
        formatter
    },
    {
        prop: 'receive_time',
        label: '领取时间',
        width: 200,
        formatter
    },
    {
        prop: 'work_user',
        label: '发送员工',
        width: 200,
        formatter
    },
    // {
    //   prop: 'cust_name',
    //   label: '客户群信息',
    //   width: 200
    // },
    {
        prop: 'order_sn',
        label: '订单号',
        width: 200,
        formatter
    },
    {
        prop: 'title',
        label: '红包标题',
        width: 200,
        formatter
    },
    {
        prop: 'desc',
        label: '红包描述',
        width: 200,
        formatter
    },
    {
        prop: 'remarks',
        label: '员工备注',
        minwidth: 200,
        formatter
    },
    {
        prop: 'operate',
        label: '操作',
        width: 100,
        fixed: 'right',
        isOperate: true,
        option({ row }) {
            return [
                {
                    id: 1,
                    name: row.receive_status === 3 ? '发放' : '',
                    authCode: 'GRANT',
                    type: row.receive_status === 3 ? '' : 'text',
                    click: (row, column, index) => {
                        onChange(row);
                    }
                }
            ];
        }
    }
];

const fetchApi = () => {
    // 获取文件列表
    return getredoacketlist;
};
const onChange = row => {
    ElMessageBox.confirm(`确定发放当前红包吗？`, 'Warning', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        title: '发放'
    })
        .then(() => {
            getredoacketgrant({ id: row.id }).then((r: any) => {
                ElMessage.success('发放成功');
                tableRef.value.reload();
            });
        })
        .catch();
};
// 导出表格数据
const exportTableData = () => {
    getredoacketexport(state.searchParams).then((res: any) => {
        const a = document.createElement('a');
        // 获取文件名fileName
        a.href = res.url;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        // fetch()
    });
};
</script>

<style lang="scss" scoped>
// :deep .el-table td.el-table__cell div {
//   text-align: center;
// }
.redrecord_container {
    height: calc(100vh - 142px);
    padding: 24px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .zw-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        :deep(.el-table) {
            flex: 1;

            .el-table__empty-block {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}
</style>
